<template>
	<view class="content-list">
		<view class="c_item" v-if="orderDetail">
			<view class="sty_title">
				<p class="workNo">
					{{orderDetail.workNo}}
					<image class="btn_c" @click="copy(orderDetail.workNo)" src="/static/copy.svg" mode=""></image>
				</p>

				<span class="status"
					:class="orderDetail.status==1||orderDetail.status==2?'status_123':orderDetail.status==3?'status_4':orderDetail.status==5?'status_6':''">{{orderDetail.status==1?'待派单':orderDetail.status==2?'待网点确认':orderDetail.status==3?'处理中':orderDetail.status==4?'已完成':'已取消'}}</span>
			</view>
			<view class="module_level">
				<p class="module">{{orderDetail.module}}</p>
				<p class="level" :style="`color: ${orderDetail.levelColor};`">{{orderDetail.level}}</p>
			</view>
			<view class="tip_title">
				<view class="title_span">
					<span class="tip">报单时间：</span><span>{{orderDetail.createTime}}</span>
				</view>
				<view class="title_span">
					<span class="tip">质保状态：</span><span>{{orderDetail.overinsured?'过保':'在保'}}</span>
				</view>
				<view class="title_span" v-if="orderDetail.status==4">
					<span class="tip">工单质保：</span><span>{{orderDetail.warrantyDay}}天</span>
				</view>
				<view class="title_span">
					<span
						class="tip">客户期望上门：</span><span>{{orderDetail.expectedDate}}&nbsp;{{orderDetail.expectedStartTime}}~{{orderDetail.expectedEndTime}}</span>
				</view>
				<template v-if="orderDetail.status==2||orderDetail.status==3">

					<view class="title_span">
						<span class="tip">工程师预约时间：</span><span
							v-if="orderDetail.reservationDate">{{orderDetail.reservationDate}}&nbsp;{{orderDetail.reservationStartTime}}~{{orderDetail.reservationEndTime}}</span>
					</view>
					<!-- <view class="title_span">
									<span class="tip">签到时间：</span><span>{{orderDetail.engineerServiceTime}}</span>
								</view> -->
				</template>
				<template v-if="orderDetail.status==4||orderDetail.status==5">
					<view class="title_span">
						<span class="tip">完成时间：</span><span>{{orderDetail.endTime}}</span>
					</view>
				</template>
			</view>
			<view class="btn_change">
				<button size="mini" class="btn_green" @click="onGreen()"
					v-if="orderDetail.status==4||orderDetail.status==5">再次申请</button>
				<template v-if="orderDetail.status!=5&&(store.state.userMobileHasLogin||token)">
					<button size="mini" @click="openCancel('cancel')" v-if="orderDetail.status!=4"
						class="btn_again">取消服务</button>
					<button size="mini" @click="openCancel('time')" class="btn_title"
						v-if="orderDetail.status!=4">改约日期</button>
					<button size="mini" v-if="orderDetail.status==4" class="btn_title">服务评价</button>
				</template>
			</view>

		</view>

		<!-- 商品信息 -->
		<view class=" c_item_">
			<view class="segmented-control">
				<view class="segmented-control__text" :class="{'segmented-control__item--text':current==index}"
					v-for="(item,index) in items" :key="index" @click="onClickItem(index)">
					<span>{{item}}</span>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods_info" v-show="current==0" v-if="goodsDetail">
				<view v-for="(item,index) in goodsDetail" :key="index" class="item_li">
					<view class="conent">
						<view class="left_img">
							<image v-if="item.goodsImage" @click="lookImg([item.goodsImage])" class="img" lazy-load
								:src="item.goodsImage" mode="aspectFill"></image>
							<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
						</view>
						<view class="right_text">
							<view class="brands">
								{{'【'+item.goodsBrand+'】'}}
								{{item.goodsType}}
							</view>
							<view class="top_brand_type">
								{{item.goodsName}}
							</view>
							<view class="goods_ms">
								<view class="ms">
									<view class="">
										<p>{{item.goodsModel}}</p>
										<p class="tip">型号</p>
									</view>
								</view>
								<view class="line"></view>
								<view class="ms">
									<view class="">
										<p>{{item.goodsSpecName}}</p>
										<p class="tip">规格</p>
									</view>
								</view>
							</view>
							<view class="pt">
								<span class="tip">一物一码：</span>
								<view class="lis">
									{{item.codes[0]}}
								</view>
								<view class="num_b" @click="showGoodsCode(item)" v-if="item.codes.length!>1">
									<span class="num_text">{{item.codes.length>99?'99+':item.codes.length}}</span>
									<uni-icons type="right" size="14"></uni-icons>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 工单信息 -->
			<view class="order_info" v-show="current==1" v-if="orderDetailInfo">
				<view class="img_list">
					<view v-for="(item,index) in orderDetailInfo.images" @click="lookImg(orderDetailInfo.images,index)"
						class="img_item" :key="index">
						<image :src="item" mode="aspectFill" class="img"></image>
					</view>
				</view>
				<view class="title_content">
					<text class="text">工单内容：</text><span class="cont">{{orderDetailInfo.content}}</span>
				</view>
				<view v-for="(item,index) in orderDetailInfo.orderCustomFields" :key="index">
					<view class="title_content">
						<view class="text">
							{{item.name}}：
						</view>
						<view class="cont"
							v-if="item.type==1||item.type==2||item.type==3||item.type==4">
							{{item.val.join('、')}}
						</view>
						<view class="cont" v-if="item.type==5">
							<image :src="img" mode="aspectFill" class="cont_img"
								v-for="(img,index) in item.val"
								:key="index"
								@click="lookImg(item.val,index)"></image>
						</view>
						<view class="cont" v-if="item.type==6">
							<view class="pdf_sty"
								v-for="(url,index) in item.val"
								:key="index" @click="lookPDF(url)">
								PDF
							</view>
						</view>
						<view class="cont" v-if="item.type==7">
							<video :src="url" mode="aspectFill" class="cont_img"
								v-for="(url,index) in item.val"
								@click="videoUrlShow(url)" :key="index" :controls="false"
								:enable-progress-gesture="false"
								:show-center-play-btn="false"></video>
						</view>
						<!-- 评分8 -->
						<view class="cont" v-if="item.type===8">
							<uni-rate :readonly="true"
								:value="Number(item.val.join())/2"
								margin="10" />
						</view>
					</view>
				</view>
			</view>
			<!-- 服务商信息 -->
			<view class="network_content" v-show="current==2" v-if="networkInfo">
				<view class="n_tip">
					<text class="text">服务商：</text><span class="cont">{{networkInfo.network}}</span>
				</view>
				<view class="n_tip">
					<text class="text">工程师信息：</text><span
						class="cont">{{networkInfo.engineerName}}&nbsp;{{networkInfo.engineerPhone}}</span>
				</view>
				<view class="n_tip">
					<text class="text">协同人信息：</text><span class="cont">{{networkInfo.cooperateEngineer}}</span>
				</view>
			</view>
			<!-- 客户信息 -->
			<view class="network_content" v-show="current==3" v-if="userInfo">
				<view class="n_tip">
					<text class="text">客户名称：</text><span class="cont">{{userInfo.name}}</span>
				</view>
				<view class="n_tip">
					<text class="text">客户电话：</text><span class="cont">{{userInfo.phone}}<uni-icons
							@click="makePhoneCall(userInfo.phone)" class="line_phone" size="12" color="#007cff"
							type="phone"></uni-icons></span>
				</view>
				<view class="n_tip">
					<text class="text">客户地址：</text><span
						class="cont">{{userInfo.province+userInfo.city+userInfo.area+userInfo.town+userInfo.address}}</span>
				</view>
			</view>
			<view class="network_content" v-show="current==4">
				正在维护中，敬请期待...
			</view>
		</view>

		<!-- 服务进度 -->
		<view class="c_item">
			<view class=" top_label">
				服务进度
			</view>
			<view class="log_list">
				<view class="log_item"
					v-for="(item,index) in (!lookShow?orderDetailLog.rows?.slice(0,2):orderDetailLog.rows)"
					:key="index">
					<uni-icons type="smallcircle" class="icon_item" size="20"
						:color="index==0?'#007cff':'#EAECEE'"></uni-icons>
					<view class="block_item">
						<view class="title_span">
							<p class="content_time" :style="{color:index==0?'#000':'#999'}">
								{{item.createTime}}
							</p>
							<p class="title" :style="{color:index==0?'#007cff':'#999'}">
								{{'【'+item.type+'】'+item.createEmp+'&nbsp;'+item.name}}{{item.event}}
							</p>
							<view class="content_text" :style="{color:index==0?'#000':'#999'}">{{item.content}}</view>
						</view>
					</view>
				</view>
				<span class="some_log" @click="onClickSome"
					v-if="orderDetailLog.total>orderDetailLog.rows.length&&lookShow">
					更多
				</span>
			</view>
			<view class="look_some" v-if="orderDetailLog.rows?.length>2">
				<view v-show="lookShow" @click="lookShow=false">
					<uni-icons type="top"></uni-icons>
				</view>
				<view v-show="!lookShow" @click="lookShow=true">
					<uni-icons type="bottom"></uni-icons>
				</view>

			</view>
		</view>
		<view class="nav_bar" v-if="showTop" @click="sllTop">
			<uni-icons type="arrow-up" color="#fff"></uni-icons>
		</view>
		<TimePopup ref="timeRef" @set-popup="showpopup=$event" :showpopup="showpopup" :workId="workId"></TimePopup>
		<!-- 取消弹窗 -->
		<uni-popup ref="popupCancel" type="dialog">
			<uni-popup-dialog type="warning" cancelText="否" confirmText="是" title="提示" content="确定要取消该服务?"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<!-- 商品一物一码列表弹窗 -->
		<uni-popup ref="popupGoodsCode" type="bottom">
			<view class="popup_list" v-if="goodsList">
				<view class="text_top_popup">
					<span>当前商品一物一码列表（{{goodsList?.codes.length}}）</span><uni-icons color="#aaa"
						@click="popupGoodsCode.close()" size="22" type="closeempty"></uni-icons>
				</view>
				<view class="height_list">
					<view class="left_img">
						<image v-if="goodsList.goodsImage" @click="lookImg([goodsList.goodsImage])" class="img"
							lazy-load :src="goodsList.goodsImage" mode="aspectFill"></image>
						<uni-icons color="#aae" size="48" v-else type="image"></uni-icons>
					</view>
					<view class="right_text">
						<view class="brands">
							{{'【'+goodsList.goodsBrand+'】'}}
							{{goodsList.goodsType}}
						</view>
						<view class="top_brand_type">
							{{goodsList.goodsName}}
						</view>
						<view class="ms">
							<p class="tip">型号：</p>
							<p>{{goodsList.goodsModel}}</p>
						</view>
						<view class="ms">
							<p class="tip">规格：</p>
							<p>{{goodsList.goodsSpecName}}</p>
						</view>
					</view>
				</view>
				<view class="list_ovh">
					<uni-list-item v-for="(item,index) in goodsList?.codes" clickable :key="index">
						<template v-slot:body>
							<view class="way_name" @click="copy(item)">
								<span>{{index+1}}.&nbsp;&nbsp;{{item}}</span>
								<image class="img" src="/static/copy.svg" mode=""></image>
							</view>
						</template>
					</uni-list-item>
				</view>
			</view>
		</uni-popup>

		<!-- 弹出申请方式-->
		<uni-popup ref="showBottom" type="bottom">
			<view class="popup_way">
				<view class="text_top_popup">
					选择类型<uni-icons class="icon" color="#aaa" @click="showBottom.close()" size="22"
						type="closeempty"></uni-icons>
				</view>
				<view class="height_list">
					<uni-list-item v-for="(item,index) in waylist" clickable @click="addWorkor(item)" :key="index">
						<template v-slot:body>
							<view class="way_name">
								<span
									:style="{color:store.state.wayType.id==item.id?'#007cff':''}">{{item.name}}</span><uni-icons
									v-if="store.state.wayType.id==item.id" color="#007cff"
									type="checkmarkempty"></uni-icons>
							</view>
						</template>
					</uni-list-item>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupvideoRef" background-color="#fff" @change="urlClickShow">
			<video :src="videoUrl" :enable-progress-gesture="false" :show-center-play-btn="false"></video>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref, watch
	} from "vue";
	import {
		onLoad, onPageScroll, onPullDownRefresh, onUnload, onShow
	} from '@dcloudio/uni-app'
	import apiOrder from "@/util/api/order.js"
	import TimePopup from '@/components/u-user/TimePopup.vue'
	import store from '@/store/index.js'
	import _ from "lodash"
	const orderDetail = ref(null)//详情信息
	const orderDetailLog = ref({ rows: [], total: 0 })//详情信息进度
	const goodsDetail = ref(null)//商品详情
	const orderDetailInfo = ref(null)//工单信息
	const networkInfo = ref(null)//服务商信息
	const userInfo = ref(null)//客户
	const lookShow = ref(false)//展开
	const current = ref(0)
	const workId = ref('')//工单id
	const showTop = ref(false)//显示滚到按钮
	const timeRef = ref()
	const showpopup = ref(false)//改约日期弹窗
	const popupCancel = ref()//取消弹窗
	const popupGoodsCode = ref()//商品编码展示
	const goodsList = ref()
	const items = ['工单商品', '工单信息', '服务商信息', '客户', '费用合计']
	onLoad((e) => {
		workId.value = e.id
		if (!workId.value) return
		getOrderListDetail(e.id)
		OrderDetailServiceLog(e.id)
		OrderDetailGoodsInfo(e.id)
		uni.pageScrollTo({
			scrollTop: 0
		})
	})
	onUnload(() => {
		uni.hideLoading()
	})
	const token = ref('')
	onShow(() => {
		token.value = uni.getStorageSync('dd-access-user').token
	})
	const showBottom = ref(null) //申请工单弹窗
	let waylist = ref([])
	// 选择申请方式
	const addWorkor = (item) => {
		store.commit('setWayType', {
			id: item.id,
			name: item.name,
			type: item.type//1安装
		})
		showBottom.value.close()
		uni.navigateTo({
			url: "/pages/home/add?id=" + workId.value
		})
	}
	// 进度分页
	const pageLog = ref({
		"limit": 0,
		"page": 1
	})
	// 获取报单模块列表
	const getApplyWay = async () => {
		let data = {
			"limit": 0,
			"name": "",
			"page": 0
		}
		uni.showLoading({
			title: "加载中..."
		})
		await apiOrder.getOrderModuleList(data).then(res => {
			if (res.code == 20000) {
				waylist.value = res.data.rows
			}
		})
		uni.hideLoading()
	}
	// 点击再次申请
	const onGreen = async () => {
		store.commit('setorderGoodsTypes', [])
		store.commit('setchackFaultList', [])
		store.commit('setchackFaultItem', { id: null })
		store.commit('setWayType', {})
		store.commit('setcheckBrandItem', { id: null })
		store.commit('setcheckClassifyItem', { id: null })
		store.commit('setappointmentTime', null)
		store.commit('setUserOrder', {
			"address": "", //客户详细地址
			"area": "", //地址-县/区
			"city": "", //地址-市
			"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是	
			"name": "", //客户姓名
			"otherPhone": "", //其他电话
			"phone": "", //客户手机号
			"province": "", //地址-省
			"town": "", //地址-镇
			"userId": null
		})
		showBottom.value.open()
		await getApplyWay()
	}
	onPullDownRefresh(async () => {
		pageLog.value.page = 1
		await Promise.all([getOrderListDetail(workId.value),
		OrderDetailServiceLog(workId.value),
		OrderDetailGoodsInfo(workId.value)]).then(() => {
			uni.stopPullDownRefresh()
		})
	})
	// 0'商品信息', 1'工单信息', 2'服务商信息', 3'客户', 4'费用合计'
	const onClickItem = (index : number) => {
		current.value = index
		if (!workId.value) return
		switch (index) {
			case 0:
				OrderDetailGoodsInfo(workId.value)
				break;
			case 1:
				OrderDetailOrderInfo(workId.value)
				break;
			case 2:
				OrderDetailNetworkInfo(workId.value)
				break;
			case 3:
				OrderDetailUserInfo(workId.value)
				break;
			case 4:
				uni.showToast({
					title: "正在维护中，敬请期待...",
					duration: 2000,
					icon: "none"
				})
				break;
		}
	}
	watch(showpopup, (n) => {
		if (n) {

		} else {
			getOrderListDetail(workId.value)
			OrderDetailServiceLog(workId.value)
		}
	})
	// 商品一物一码展示
	const showGoodsCode = (item) => {
		goodsList.value = item
		popupGoodsCode.value.open()
	}
	// 复制
	const copy = (val : any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'none'
				})
			},
		})
	}
	// 查看附件
	const lookPDF = (url) => {
		uni.openDocument({
			filePath: url,
			fileType: 'pdf',
			success: function (res) {
			},
			fail: function (err) {
				uni.showToast({
					icon: 'none',
					title: err
				})
			}
		});
	}
	// 查看视频
	const popupvideoRef = ref()
	const videoUrl = ref('')
	const videoUrlShow = (url) => {
		videoUrl.value = url
		popupvideoRef.value.open()
	}
	const urlClickShow = (v) => {
		if (!v.show) videoUrl.value = ''
	}
	// 获取工单列表
	const getOrderListDetail = async (id) => {
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})
		await apiOrder.getOrderDetail(id).then(res => {
			if (res.code == 20000) {
				orderDetail.value = res.data.row
			}
		})
		uni.hideLoading()
	}
	// 打开取消弹窗
	const openCancel = (type) => {
		if (type == 'cancel') {
			popupCancel.value.open()
		}
		if (type == 'time') {
			showpopup.value = true
		}
	}
	// 关闭取消弹窗
	const dialogClose = () => {
		popupCancel.value.close()
	}
	// 点击查看更多
	const onClickSome = _.debounce(() => {
		pageLog.value.page += 1
		OrderDetailServiceLog(workId.value)
	}, 800)
	//详情信息进度
	const OrderDetailServiceLog = async (id) => {
		uni.showLoading({
			title: "加载中..."
		})
		await apiOrder.getOrderDetailServiceLog(pageLog.value, id).then(res => {
			if (res.code == 20000) {
				if (pageLog.value.page > 1) {
					orderDetailLog.value.rows = [...orderDetailLog.value.rows, ...res.data.rows]
				} else {
					orderDetailLog.value.rows = res.data.rows
				}
				orderDetailLog.value.total = res.data.total
			}
		})
		uni.hideLoading()
	}
	// 确认取消工单
	const dialogConfirm = () => {
		apiOrder.cancelOrder(workId.value).then(res => {
			if (res.code == 20000) {
				uni.showToast({
					icon: 'success',
					title: res.message
				})
				getOrderListDetail(workId.value)
				OrderDetailServiceLog(workId.value)
			}
		})
	}
	//获取商品信息
	const OrderDetailGoodsInfo = async (id) => {
		uni.showLoading({
			title: "加载中..."
		})
		await apiOrder.getOrderDetailGoodsInfo(id).then(res => {
			if (res.code == 20000) {
				goodsDetail.value = res.data.row
				goodsDetail.value = goodsDetail.value.map(o => {
					o.lookShow = false
					return o
				})

			}
		})
		uni.hideLoading()
	}
	// 调起拨打电话的功能
	const makePhoneCall = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber
		})
	}
	// 工单信息
	const OrderDetailOrderInfo = async (id) => {
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})

		await apiOrder.getOrderDetailOrderInfo(id).then(res => {
			if (res.code == 20000) {
				orderDetailInfo.value = res.data.row
			}
		})
		uni.hideLoading()
	}
	// 服务商信息
	const OrderDetailNetworkInfo = async (id) => {
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})
		await apiOrder.getOrderDetailNetworkInfo(id).then(res => {
			if (res.code == 20000) {
				networkInfo.value = res.data.row
			}
		})
		uni.hideLoading()
	}
	// 服务商信息
	const OrderDetailUserInfo = async (id) => {
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})
		await apiOrder.getOrderDetailUserInfo(id).then(res => {
			if (res.code == 20000) {
				userInfo.value = res.data.row

			}
		})
		uni.hideLoading()
	}
	// 预览图片
	const lookImg = (urls, num = 0) => {
		uni.previewImage({
			urls: urls,
			current: num
		})
	}
	// 获取滚到位置
	onPageScroll((e) => {

		if (e.scrollTop > 280) {
			showTop.value = true;
		} else if (e.scrollTop < 280) {
			showTop.value = false;
		}
	})
	// 回到顶部
	const sllTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100
		});
	}
</script>

<style lang="scss" scoped>
	.popup_way {
		height: 60vh;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		padding-bottom: 100rpx;

		.text_top_popup {
			text-align: center;
			font-size: 32rpx;
			padding: 20rpx 0;
			font-weight: bold;

			.icon {
				position: absolute;
				right: 40rpx;
				font-weight: 500;
			}
		}

		.height_list {
			height: 100%;
			overflow: auto;

			.way_name {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
			}
		}
	}

	.content-list {
		background-color: #f6f7fa;
		padding-top: 6rpx;
		padding-bottom: 200rpx;

		.nav_bar {
			position: fixed;
			right: 24rpx;
			bottom: 30vh;
			width: 30rpx;
			height: 30rpx;
			background-color: rgba(0, 0, 0, 0.6);
			border-radius: 50%;
			padding: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.c_item {
			background-color: #fff;
			margin: 24rpx;
			padding: 24rpx 20rpx 12rpx;
			border-radius: 20rpx;

			.sty_title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.status {
					font-size: 24rpx;
					background-color: #ecf5ff;
					color: #007cff;
					padding: 8rpx;
					border-radius: 8rpx;
				}

				.status_123 {
					color: #e6a23c;
					background-color: #fdf6ec;

				}

				.status_4 {
					color: #00c0c0;
					background-color: #ebf6f6;

				}

				.status_6 {
					color: #909399;
					background-color: #f4f4f5;

				}

				.workNo {
					font-size: 28rpx;
					display: flex;
					align-items: center;

					.btn_c {
						height: 30rpx;
						line-height: 30rpx;
						width: 24rpx;
						margin-left: 24rpx;
					}
				}

			}

			.module_level {
				display: flex;
				align-items: center;
				padding: 12rpx 0 16rpx;

				.module {
					font-size: 28rpx;
					// color: #666;
					font-weight: bold;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					word-wrap: break-word;
					word-break: break-all;

				}


				.level {
					font-size: 24rpx;
					color: #666;
					margin: 0 24rpx;
				}

			}


			.tip_title {
				font-size: 24rpx;

				.title_span {
					margin-bottom: 12rpx;

					// color: #666;
					.tip {
						color: #777;
						font-size: 24rpx;
					}
				}
			}

			.btn_change {
				text-align: right;
				padding-top: 12rpx;

				uni-button:after {
					border: 0rpx;
				}

				.btn_green {
					background-color: #fff;
					padding: 0 12rpx;
					border-radius: 10rpx;
					color: #00c0c0;
					font-size: 24rpx;
					margin-left: 24rpx;
					border: 1rpx solid #00c0c0;
				}

				.btn_again {
					background-color: #fff;
					padding: 0 12rpx;
					border-radius: 10rpx;
					color: #666;
					font-size: 24rpx;
					margin-left: 24rpx;
					border: 1rpx solid #999;
				}

				.btn_title {
					background-color: #fff;
					padding: 0 12rpx;
					border-radius: 10rpx;
					color: #007cff;
					font-size: 24rpx;
					margin-left: 24rpx;
					border: 1rpx solid #007cff;
					box-shadow: 0;
				}
			}
		}

		.c_item {
			.top_label {
				border-left: 6rpx solid #007cff;
				padding-left: 12rpx;
				font-size: 28rpx;
				font-weight: bold;
			}

			.look_some {
				text-align: center;
			}

			.log_list {
				padding: 40rpx 24rpx 0;

				.log_item {
					position: relative;
					border-left: 4rpx dashed #EAECEE;

					&:last-child {
						border-left: 4rpx dashed transparent;
					}

					.icon_item {
						position: absolute;
						left: -22rpx;
						top: -5rpx;
					}

					.block_item {
						padding: 0 0 40rpx 24rpx;

						.title_span {
							.title {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								font-size: 28rpx;
								color: #007cff;
							}

							.content_text {
								display: flex;
								align-items: center;
								flex-wrap: wrap;
								font-size: 24rpx;
								text-indent: .5em;
								margin-top: 12rpx;
							}

							.content_time {
								font-size: 24rpx;
								text-indent: .5em;
								margin: 0rpx 0 12rpx;
							}
						}
					}
				}

				.some_log {
					font-size: 28rpx;
					color: #007cff;
				}
			}
		}

		.c_item_ {
			background-color: #fff;
			margin: 24rpx;
			padding: 24rpx 20rpx;
			border-radius: 20rpx;

			:deep(.segmented-control) {
				border-bottom: 1rpx solid #eee;
				display: flex;
				justify-content: space-between;

				.segmented-control__text {
					font-size: 28rpx !important;
					font-weight: bold;
					border-bottom: 4rpx solid transparent;
					padding: 10rpx;
					position: relative;
				}

				.segmented-control__item--text {
					border-bottom: 4rpx solid #007cff;
					padding: 10rpx;
					color: #007cff;
					transition: all .5s;
				}
			}

			.goods_info {

				.item_li {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					position: relative;
					padding: 24rpx 0;

					.conent {
						display: flex;
						align-items: center;
						width: 100%;

						.left_img {
							width: 200rpx;
							height: 200rpx;
							border: 1px solid #eee;
							border-radius: 10rpx;
							margin: 0 20rpx 0 0;

							.img {
								width: 100%;
								height: 100%;
								border-radius: 20rpx;
							}
						}

						.right_text {
							font-size: 24rpx;
							margin-right: 12rpx;
							flex: 1;
							position: relative;

							.brands {
								font-weight: bold;
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;

							}

							.top_brand_type {
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
								margin: 10rpx;
								color: #000;
								font-weight: bold;
							}

							.goods_ms {
								display: flex;
								justify-content: space-between;
								align-items: center;
								width: 100%;

								.ms {
									display: flex;
									justify-content: center;
									flex-direction: column;
									align-items: center;
									width: 100%;
									word-wrap: break-word;
									word-break: break-all;
									margin: 8rpx;

									.tip {
										color: #777;
									}
								}

								.line {
									height: 50rpx;
									width: 2rpx;
									background-color: #ccc;
								}
							}

							.pt {
								margin-top: 10rpx;
								display: flex;
								align-items: center;
								width: 100%;

								.num_b {
									position: absolute;
									right: -14rpx;
									color: #fff;
									border-radius: 6rpx;

									.num_text {
										background-color: #007cff;
										border-radius: 4rpx;
										padding: 0 8rpx;
										font-size: 22rpx;
									}
								}

								.tip {
									color: #777;
								}
							}

							.look_some {
								text-align: center;
							}
						}
					}
				}
			}

			.order_info {
				min-height: 230rpx;

				.img_list {
					display: flex;
					align-items: center;
					width: 100%;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.img_item {
						width: calc(20% - 32rpx);
						margin: 16rpx;
						border: 1px solid #eee;
						width: 120rpx;
						height: 120rpx;

						.img {
							width: 120rpx;
							height: 120rpx;
							// background-color: #EAECEE;
						}
					}
				}

				.title_content {
					display: flex;
					margin: 20rpx 12rpx 0;

					.text {
						font-size: 28rpx;
						color: #777;
					}

					.cont {
						font-size: 28rpx;
						white-space: pre-wrap;
						word-wrap: break-word;
						word-break: break-all;
						flex: 1;
					}
					.cont_img {
						width: 80rpx;
						height: 80rpx;
						margin: 0 8rpx 16rpx;
						box-shadow: 0 0 2rpx 2rpx #e8e8e8;
					}
					
					.pdf_sty {
						background-color: rgb(250, 81, 81);
						width: 80rpx;
						height: 80rpx;
						color: #fff;
						text-align: center;
						font-size: 22rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 12rpx;
						margin-bottom: 12rpx;
					
						&:before {
							content: '';
							position: absolute;
							z-index: 2;
							border: 12rpx solid #0000002b;
							right: 0rpx;
							top: 0rpx;
							border-top: 12rpx solid #fff;
							border-right: 12rpx solid #fff;
						}
					}
				}
			}

			.network_content {
				margin: 20rpx 12rpx 0;
				min-height: 230rpx;

				.n_tip {
					margin-top: 12rpx;
					display: flex;

					.text {
						font-size: 28rpx;
						color: #777;
					}

					.line_phone {
						border: 2rpx solid #007cff;
						width: 20rpx;
						height: 20rpx;
						line-height: 16rpx;
						border-radius: 50%;
						margin-left: 30rpx;
						padding: 2rpx;
					}

					.cont {
						font-size: 28rpx;
						white-space: pre-wrap;
						word-wrap: break-word;
						word-break: break-all;
						display: flex;
						align-items: center;
						flex: 1;
					}
				}

			}

		}

		.popup_list {
			padding: 0 24rpx;
			height: 70vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;

			.text_top_popup {
				text-align: center;
				font-size: 28rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.height_list {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.left_img {
					width: 180rpx;
					height: 180rpx;
					border: 1px solid #eee;
					border-radius: 10rpx;
					margin: 0 20rpx 0 0;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.right_text {
					font-size: 24rpx;
					margin-right: 12rpx;
					flex: 1;
					position: relative;

					.brands {
						word-wrap: break-word;
						word-break: break-all;
						font-weight: bold;
						font-size: 28rpx;
						margin: 0 0 10rpx;

					}

					.top_brand_type {
						font-size: 28rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
						margin: 10rpx;
						color: #000;
						font-weight: bold;
					}

					.ms {
						display: flex;
						align-items: center;
						width: 100%;
						word-wrap: break-word;
						word-break: break-all;
						margin: 8rpx;

						.tip {
							color: #999;
						}
					}
				}
			}

			.list_ovh {
				height: 600rpx;
				overflow: auto;

				.way_name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					width: 85%;

					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		:deep(.uni-popup) {
			z-index: 999;
		}
	}
</style>